<template>
  <div class="login-container">
    <h1 class="login-title">
      <a href="#" @click.prevent="routerTo()">Submit</a>
    </h1>
    <form id="loginform" class="loginform">
      <p>
        <label for="user_login">用户名/手机号</label>
        <input
          id="user_login"
          class="input"
          type="text"
          name="log"
          value=""
          size="20"
          autocomplete="off"
          v-model="form.username"
          v-on:input="onchange"
        />
        <el-button
          v-show="isPhone"
          type="primary"
          class="send_btn"
          @click="getCode"
          >发送验证码</el-button
        >
        <el-button v-show="!show" class="count">{{ count }}</el-button>
      </p>

      <p>
        <label for="user_pass">密码/验证码</label>
        <input
          id="user_pass"
          class="input"
          :type="[isPhone ? 'text' : 'password']"
          name="log"
          value=""
          size="20"
          autocomplete="off"
          v-model="form.password"
        />
      </p>

      <p><el-button class="login_btn btn" @click.native="onSubmit">登录</el-button></p>
    </form>
  </div>
</template>
  <script>
import { login } from "@/api/login.js";
import { code } from "@/api/code.js";
const reg = /^1[0-9]{10}$/;
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      cid: null,
      sid: null,
      isPhone: false,
      show: true,
      count: "",
      timer: null,
    };
  },
  methods: {
    getCode() {
      code().then(response=>{
        this.form.password = response.data;
      });
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    routerTo() {
      this.$router.push({
        path: "/login",
      });
    },
    onchange() {
      this.isPhone = reg.test(this.form.username);
    },
    onSubmit() {
      this.$store.dispatch('Login', this.form).then((response)=>{
        let map = response.data;
        let url = map.url;
        let id = map.id;
        this.$router.push({
          path: url,
          query: {id: id}
        })
      })
    },
  },
};
</script>

<style scoped>

body {
  color: #444;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  background: url("https://vcb-s.com/wp-content/themes/zanblog2_1_0/ui/images/bg.jpg");
}

.login_btn {
  width: 100%;
  background-color: #d9534f !important;
  border-color: #fff;
  color: #fff;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.hid {
  display: none;
}

.show {
  display: block;
}

.login-container form {
  margin-top: 20px;
  margin-left: 0;
  padding: 26px 24px 46px;
  font-weight: 400;
  overflow: hidden;
  background: #fff;
  border: 1px solid #ccd0d4;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

p {
  line-height: 1.5;
  margin-bottom: 0;
}

label {
  font-size: 14px;
  line-height: 1.5;
  display: inline-block;
  margin-bottom: 3px;
}

.input {
  background: #fbfbfb;
  font-size: 24px;
  line-height: 1.33333333;
  width: 100%;
  border-width: 0.0625rem;
  padding: 0.1875rem 0.3125rem;
  margin: 0 6px 16px 0;
  min-height: 40px;
  max-height: none;
  box-shadow: 0 0 0 transparent;
  border-radius: 4px;
  border: 1px solid #7e8993;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  color: #32373c;
}

/* 背景 */
.login-container {
  position: relative;
  padding: 20px 0;
  width: 320px;
  padding: 8% 0 0;
  margin: auto;
}

a {
  text-decoration: none;
}

.login-container h1 {
  text-align: center;
  margin-bottom: 20px;
  background-color: #3d4450;
  border-radius: 4px;
}

.login-container h1 a {
  display: block;
  color: #fff;
  margin: 0 auto;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.3;
  padding: 0;
  outline: 0;
}
/* 标题 */
.login-title {
  color: white;
  text-align: center;
}
</style> 